<template>
  <div id="app">
      <div class="contain">
        <!-- 左侧列表 -->
        <div class="list-box">

          <!-- 添加资产 -->
          <form class="my-form">
            <input type="text" class="form-control" placeholder="消费名称" />
            <input type="text" class="form-control" placeholder="消费价格" />
            <button type="button" class="btn btn-primary">添加账单</button>

          </form>

          <table class="table table-hover">
            <thead>
              <tr>
                <th>编号</th>

                <th>消费名称</th>

                <th>消费价格</th>

                <th>操作</th>

              </tr>

            </thead>

            <tbody>
              <tr>
                <td>1</td>

                <td>帽子</td>

                <td>99.00</td>

                <td><a href="javascript:;">删除</a></td>

              </tr>

              <tr>
                <td>2</td>

                <td>大衣</td>

                <td class="red">199.00</td>

                <td><a href="javascript:;">删除</a></td>

              </tr>

            </tbody>

            <tfoot>
              <tr>
                <td colspan="4">消费总计： 298.00</td>

              </tr>

            </tfoot>

          </table>

        </div>


      </div>

    </div>
</template>

<script>
  export default {
    data(){
      return {
        msg:3
      }
    },
    methods:{
      changeMsg(){
        this.msg += 3
      }
    },
    computed:{
      msg2(){
        return this.msg * 2
      }
    },
    watch:{
      msg(newVal,oldVal){
        console.log(newVal,oldVal)
      }
    }
  }
</script>

<style>
.red {
  color: red!important;
}
.search {
  width: 300px;
  margin: 20px 0;
}
.my-form {
  display: flex;
  margin: 20px 0;
}
.my-form input {
  flex: 1;
  margin-right: 20px;
}
.table > :not(:first-child) {
  border-top: none;
}
.contain {
  display: flex;
  padding: 10px;
}
.list-box {
  flex: 1;
  padding: 0 30px;
}
.list-box  a {
  text-decoration: none;
}
.echarts-box {
  width: 600px;
  height: 400px;
  padding: 30px;
  margin: 0 auto;
  border: 1px solid #ccc;
}
tfoot {
  font-weight: bold;
}
@media screen and (max-width: 1000px) {
  .contain {
    flex-wrap: wrap;
  }
  .list-box {
    width: 100%;
  }
  .echarts-box {
    margin-top: 30px;
  }
}
</style>
